<template>
  <el-row class="tac">
    <el-col :span="5" class="organplane">
      <a-tree
        default-expand-all
        @select="onSelect"
        show-icon
        @rightClick="onRightClick"
        :tree-data="treeData"
        :default-selected-keys="['0-0-0']"
      >
        <a-icon slot="switcherIcon" type="down" />
        <a-icon slot="smile" type="home" />
        <a-icon slot="meh" type="cluster" />
        <a-icon slot="custom" type="apartment" />
      </a-tree>
    </el-col>
    <el-col :span="19">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <img
            src="https://zht-admin-test.huiqulx.com/subapp/business_analysis-admin/2b2d5d900b3f14df583cfbf5b4f48b7d.png"
            alt="push"
            style="width: 20px; height: 20px; margin-top: -8px;"
          />
          <span style="font-size: 18px; padding-left: 10px; font-weight: bold;"
            >机构/部门信息</span
          >
        </div>
        <a-row style="margin-top:8px">
          <a-col :span="8">
            <div class="demo-input-suffix">
              <span>名称:</span>
              {{ checkednode.name }}
            </div>
          </a-col>
          <a-col :span="8">
            <div class="demo-input-suffix">
              <span>编码:</span>
              {{ checkednode.code }}
            </div>
          </a-col>
          <a-col :span="8">
            <div class="demo-input-suffix">
              <span>传真:</span>
              {{ checkednode.ffax }}
            </div>
          </a-col>
        </a-row>
        <a-row style="margin-top:8px">
          <a-col :span="8">
            <div class="demo-input-suffix">
              <span>电话:</span>
              {{ checkednode.fphone }}
            </div>
          </a-col>
          <a-col :span="16">
            <div class="demo-input-suffix">
              <span>地址:</span>
              {{ checkednode.faddress }}
            </div>
          </a-col>
        </a-row>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <img
            src="https://zht-admin-test.huiqulx.com/subapp/business_analysis-admin/2b2d5d900b3f14df583cfbf5b4f48b7d.png"
            alt="push"
            style="width: 20px; height: 20px; margin-top: -8px;"
          />
          <span style="font-size: 18px; padding-left: 10px; font-weight: bold;"
            >用户列表</span
          >
        </div>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="用户名称" prop="fusername" width="120" fixed>
          </el-table-column>
          <el-table-column label="真实名称" prop="frealaname" width="120">
          </el-table-column>
          <el-table-column label="联系电话" prop="fphone" width="120">
          </el-table-column>
          <el-table-column label="邮箱" prop="femail" width="200">
          </el-table-column>
          <el-table-column label="是否启用" prop="fstate" width="80">
            <template slot-scope="scope">
              {{ scope.row.fstate === '1' ? '已启用' : '停用' }}
            </template>
          </el-table-column>
          <el-table-column label="到期时间" prop="fduetime" width="150">
          </el-table-column>
          <el-table-column label="最后修改人" prop="fduetime" width="150">
          </el-table-column>
          <el-table-column label="最后修改时间" prop="fduetime" width="150">
          </el-table-column>
          <el-table-column align="right" fixed="right" width="180">
            <template slot="header">
              操作
            </template>
            <template slot-scope="record">
              <a
                class="margin-a"
                href="javascript:;"
                style="margin-right: 5px;"
                @click="UserEdit(record.row)"
                >修改</a
              >
              <a
                class="margin-a"
                href="javascript:;"
                style="margin-right: 5px;"
                @click="setResetPassword(record.row)"
                >密码重置</a
              >
              <a
                class="margin-a"
                href="javascript:;"
                style="margin-right: 5px;"
                @click="fStopOrStart(record.row)"
              >
                {{ record.row.fstate === '1' ? '停用' : '启用' }}
              </a>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentpage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagination.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        >
        </el-pagination>
      </el-card>
    </el-col>
    <v-contextmenu ref="contextmenu">
      <v-contextmenu-item @click="addOrgan">添加机构</v-contextmenu-item>
      <v-contextmenu-item @click="addDept">添加部门</v-contextmenu-item>
      <v-contextmenu-item @click="editOrgan">修改</v-contextmenu-item>
    </v-contextmenu>
    <v-contextmenu ref="organMenu">
      <v-contextmenu-item @click="addDept">添加部门</v-contextmenu-item>
      <v-contextmenu-item @click="editOrgan">修改</v-contextmenu-item>
      <v-contextmenu-item @click="delOrgan">删除</v-contextmenu-item>
    </v-contextmenu>
    <v-contextmenu ref="deptMenu">
      <v-contextmenu-item @click="addUser">添加用户</v-contextmenu-item>
      <v-contextmenu-item @click="editDept">修改</v-contextmenu-item>
      <v-contextmenu-item @click="delDept">删除</v-contextmenu-item>
    </v-contextmenu>
    <zhlDialog
      title="机构编辑"
      ref="organinfodialog"
      width="460px"
      class="my-dialog"
    >
      <orgininfo :datainfo="datainfo" @savedata="saveorgandata"></orgininfo>
    </zhlDialog>
    <zhlDialog
      title="部门编辑"
      ref="deptinfodialog"
      width="460px"
      class="my-dialog"
    >
      <deptinfo :datainfo="datainfo" @savedata="saveorgandata"></deptinfo>
    </zhlDialog>
    <zhlDialog
      title="用户编辑"
      ref="userinfodialog"
      width="460px"
      class="my-dialog"
    >
      <userinfo :datainfo="datainfo" @savedata="saveuserdata"></userinfo>
    </zhlDialog>
  </el-row>
</template>
<script>
import { GetALLOrganOrDept, delOrgan } from '@/api/tappOrgan'
import { QueryUser, StopOrStart, ResetPassword } from '@/api/tappUser'
import { delDept } from '@/api/tappDept'
import orgininfo from './orgininfo.vue'
import deptinfo from './deptinfo.vue'
import userinfo from './userinfo.vue'
export default {
  data() {
    return {
      treeData: [],
      selectnode: {},
      parentnode: {},
      datainfo: {},
      tableData: [],
      opttype: '',
      checkednode: { name: '', code: '', ffax: '', fphone: '', faddress: '' },
      pagination: { pagesize: 10, total: 0, currentpage: 1 }
    }
  },
  components: { orgininfo, deptinfo, userinfo },
  methods: {
    onSelect(selectedKeys, info) {
      if (info.node.dataRef.code !== this.checkednode.code) {
        this.checkednode = info.node.dataRef
        this.loadUserdata(this.checkednode.code, 1)
      }
    },
    onRightClick({ event, node }) {
      const answer = node._props.dataRef.anwer
      if (answer) {
        this.$refs.contextmenu.hide()
        this.answer = answer
        return
      }
      this.parentnode = null
      if (node.$parent.dataRef !== null && node.$parent.dataRef !== undefined) {
        this.parentnode = node.$parent.dataRef
      }
      this.selectnode = node.dataRef
      console.log(node.dataRef)
      const postition = {
        top: event.y,
        left: event.x
      }
      this.$refs.contextmenu.hide()
      this.$refs.organMenu.hide()
      this.$refs.deptMenu.hide()
      switch (this.selectnode.slots.icon) {
        case 'smile':
          this.$refs.contextmenu.show(postition)
          break
        case 'meh':
          this.$refs.organMenu.show(postition)
          break
        case 'custom':
          this.$refs.deptMenu.show(postition)
          break
        default:
          break
      }
    },
    handleClick() {},
    loadDatatree() {
      GetALLOrganOrDept().then(res => {
        const itemdata = {
          title: res.data[0].name,
          key: res.data[0].fid + '',
          id: res.data[0].fid,
          code: res.data[0].code,
          name: res.data[0].name,
          ffax: res.data[0].ffax,
          fphone: res.data[0].fphone,
          faddress: res.data[0].faddress,
          slots: {
            icon: 'smile'
          },
          children: []
        }
        this.checkednode = res.data[0]
        this.loadUserdata(this.checkednode.code, 1)
        this.recombination(res.data[0].children, itemdata)
        this.treeData.push(itemdata)
      })
    },
    recombination(treelist, parent) {
      for (let i = 0; i < treelist.length; i++) {
        const itemdata = {
          title: treelist[i].name,
          key: parent.key + '-' + treelist[i].fid,
          id: treelist[i].fid,
          code: treelist[i].code,
          name: treelist[i].name,
          ffax: treelist[i].ffax,
          fphone: treelist[i].fphone,
          faddress: treelist[i].faddress,
          slots: {
            icon: 'smile'
          },
          children: []
        }
        switch (treelist[i].typeid) {
          case '1':
            itemdata.slots.icon = 'meh'
            break
          case '2':
            itemdata.slots.icon = 'custom'
            break
          default:
            break
        }
        this.recombination(treelist[i].children, itemdata)
        parent.children.push(itemdata)
      }
    },
    addOrgan() {
      this.opttype = 'addOrgan'
      this.datainfo = {}
      this.datainfo.fparentname = this.selectnode.title
      this.datainfo.fparentid = this.selectnode.id
      this.$refs.organinfodialog.visible = true
    },
    addDept() {
      this.opttype = 'addDept'
      this.datainfo = {}
      this.datainfo.fparentname = this.selectnode.title
      this.datainfo.fparentid = this.selectnode.id
      this.$refs.deptinfodialog.visible = true
    },
    editOrgan() {
      this.opttype = 'editOrgan'
      this.datainfo = {}
      if (this.parentnode !== null) {
        this.datainfo.fparentname = this.parentnode.title
        this.datainfo.fparentid = this.parentnode.id
      } else {
        this.datainfo.fparentname = '无'
        this.datainfo.fparentid = undefined
      }
      this.datainfo.fid = this.selectnode.id
      this.$refs.organinfodialog.visible = true
    },
    editDept() {
      this.datainfo = {}
      this.opttype = 'editDept'
      this.datainfo.fparentname = this.parentnode.title
      this.datainfo.fparentid = this.parentnode.id
      this.datainfo.fid = this.selectnode.id
      this.$refs.deptinfodialog.visible = true
    },
    delDept() {
      if (this.selectnode.children.length > 0) {
        this.$message.error('请先删除子部门！')
        return
      }
      delDept(this.selectnode.id).then(res => {
        if (res.code === 0) {
          let index = 0
          for (let i = 0; i < this.parentnode.children.length; i++) {
            if (this.selectnode.code === this.parentnode.children[i].code) {
              index = i
            }
          }
          this.$delete(this.parentnode.children, index)
          this.$message.success('删除部门成功！')
        }
      })
    },
    delOrgan() {
      if (this.selectnode.children.length > 0) {
        this.$message.error('请先删除子机构和子部门！')
        return
      }
      delOrgan(this.selectnode.id).then(res => {
        if (res.code === 0) {
          let index = 0
          for (let i = 0; i < this.parentnode.children.length; i++) {
            if (this.selectnode.code === this.parentnode.children[i].code) {
              index = i
            }
          }
          this.$delete(this.parentnode.children, index)
          this.$message.success('删除机构成功！')
        }
      })
    },
    addUser() {
      this.datainfo = {}
      this.datainfo.fdeptname = this.selectnode.name
      this.datainfo.fdeptcode = this.selectnode.code
      this.$refs.userinfodialog.visible = true
    },
    saveorgandata(data) {
      if (this.opttype === 'addOrgan') {
        const itemdata = {
          title: data.forganname,
          key: this.selectnode.key + data.fid,
          id: data.fid,
          code: data.fcode,
          slots: {
            icon: 'meh'
          },
          children: []
        }
        this.selectnode.children.push(itemdata)
      } else if (this.opttype === 'editDept') {
        const itemdata = {
          title: data.fdeptname,
          key: this.selectnode.key + data.fid,
          id: data.fid,
          code: data.fcode,
          slots: {
            icon: 'custom'
          },
          children: []
        }
        this.selectnode.children.push(itemdata)
      } else if (this.opttype === 'editDept') {
        this.selectnode.title = data.fdeptname
      } else {
        this.selectnode.title = data.forganname
      }
      this.$refs.organinfodialog.visible = false
    },
    handleUserEdit() {},
    handleUserDelete() {},
    saveuserdata() {
      this.$refs.userinfodialog.visible = false
      this.loadUserdata(this.checkednode.code, 1)
    },
    handleSizeChange(val) {
      this.pagination.pagesize = val
      this.loadUserdata(this.checkednode.code, 1)
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.pagination.currentpage = val
      this.loadUserdata(this.checkednode.code, val)
    },
    fStopOrStart(row) {
      const param = { id: row.fid, status: row.fstate === '1' ? '0' : '1' }
      StopOrStart(param).then(res => {
        this.loadUserdata(this.checkednode.code)
        this.$message.success(res.msg)
      })
    },
    UserEdit(row) {
      this.datainfo = row
      this.$refs.userinfodialog.visible = true
    },
    setResetPassword(row) {
      ResetPassword(row.fid).then(res => {
        this.$message.success(res.msg)
      })
    },
    loadUserdata(deptorgancode, pagenum) {
      const param = {
        code: deptorgancode,
        page: pagenum !== undefined ? pagenum : this.pagination.currentpage,
        rows: this.pagination.pagesize
      }
      QueryUser(param).then(res => {
        this.tableData = res.data
        this.pagination.total = res.totalcount
      })
    }
  },
  mounted() {
    this.loadDatatree()
  }
}
</script>
<style scoped>
.organplane {
  border-right: 1px solid #ebedf0;
  height: calc(100vh - 90px);
}
.box-card {
  margin: 8px;
}
</style>
